<script setup>
import { Delete, Plus, Setting } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import AssistantDialog from './settings/AssistantDialog.vue';
import { onMounted, ref } from 'vue';
import { INVALID_ASSISTANT_ID } from './constants';
import useAssistantListStore from '@/stores/assistantList';


const assistantListStore = useAssistantListStore()
onMounted(async () => {
    const res = await assistantListStore.refreshAssistantMetas()
    if (!res.success) {
        ElMessage({
            message: res.msg,
            type: 'error',
            duration: 3000
        })
    }
})

const showAssistantDia = ref(false)
const assistantIdParam = ref(INVALID_ASSISTANT_ID)

const showDialog = (id) =>{
    assistantIdParam.value = id
    showAssistantDia.value = true
}

const handleCommand = (item, conmmand) => {
    switch (conmmand) {
        case 'update':
            updateAssistant(item);
            break;
        case 'delete':
            deleteAssistant(item);
            break;
    }
}

const updateAssistant = (item) => {
    showDialog(item.id)
}

const deleteAssistant = (item) => {
    ElMessageBox.confirm(
        `将删除助理："${item.name}"，确定继续？`,
        'Warning',
        {
            confirmButtonText: '删除',
            confirmButtonClass: 'el-button--danger',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        const res = await assistantListStore.deleteAssistant(item.id)
        ElMessage({
            message: res.msg,
            type: res.success ? 'success' : 'error',
            duration: 3000
        })
    }).catch(()=>{
        // 不处理取消逻辑
    })
}

const scrollbarRef = ref()
function selectAssistant(item) {
    assistantListStore.setActiveAssistant(item)
    scrollbarRef.value.scrollTo({ top: 0 })
}
</script>

<template>
    <div class="assistant-container">
        <el-button type="primary" @click="showDialog(INVALID_ASSISTANT_ID)" size="large" :icon="Plus">新建助理</el-button>
        <div v-if="assistantListStore.isEmptyData" style="flex: 1; display: flex; justify-content: center; align-items: center;">
            <el-text type="info" truncated>还没有助理信息！</el-text>
        </div>
        <el-scrollbar ref="scrollbarRef" v-else style="flex: 1; margin-top: 20px;">
            <el-space direction="vertical" style="width: 100%;" size="large">
                <el-dropdown v-for="item in assistantListStore.assistantMetas" :key="item.id" @command="(cmd)=>handleCommand(item, cmd)" 
                    trigger="contextmenu" placement="bottom-end">
                    <el-card shadow="hover" style="height: 40px; width: 100%;" :body-style="{ padding: '14px 8px' }"
                        @click="selectAssistant(item)" :class="{'selected-assistant': item.id === assistantListStore.activeAssistantId}">
                        <el-text truncated>{{ item.name }}</el-text>
                    </el-card>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item :icon="Setting" command="update">修改</el-dropdown-item>
                            <el-dropdown-item :icon="Delete" command="delete">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-space>
        </el-scrollbar>
    </div>

    <AssistantDialog v-model:isVisible="showAssistantDia" :assistantId="assistantIdParam" />
</template>

<style scoped>
.assistant-container {
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.assistant-container :deep(.el-space__item) {
    width: 100%;
}

.selected-assistant {
    border: 1px solid #40a9ff;
    box-shadow: #40a9ff;
    order: -1; /* 配合flex布局实现置顶 */
}
</style>